<template>
  <div class="login-wrap">
    <div class="ms-login">
      <div class="ms-title">智能农业灌溉与资源管理系统</div>
      <el-form :model="param" :rules="rules" ref="login" label-width="0px" class="ms-content">
        <el-form-item prop="account">
          <el-input v-model="param.account"  placeholder="输入用户名">
            <el-button slot="prepend" icon="el-icon-user"></el-button>
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input 
            type="password"
            placeholder="输入密码"
            v-model="param.password"  
            @keyup.enter.native="submitForm()"> 
            <el-button slot="prepend" icon="el-icon-lock"></el-button>
          </el-input>
        </el-form-item>
        <div class="login-btn">
          <el-button type="primary" @click="submitForm()">登录</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      param: {
        account: '',
        password: ''
      },
      rules: {
        account: [{ required: true, message: "请输入用户名", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }]
      },
      // 模拟用户数据库 
      mockUsers: [
        {
          account: 'admin',
          password: 'admin',
          name: '管理员',
          token: 'mock_admin_token',
          userInfo: {
            name: '管理员',
            lon: 118.796,
            lat: 36.855,
            accessToken: "mock_access_token_123456",
            collapse: false 
          },
          othersInfo: [
            {name: "设备1", lon: 118.8, lat: 36.86},
            {name: "设备2", lon: 118.79, lat: 36.845},
            {name: "设备3", lon: 118.785, lat: 36.85}
          ],
          hardwareIds: [
            {id: "device_001", name: "硬件1"},
            {id: "device_002", name: "硬件2"}
          ],
          cameraKeys: {
            key: "mock_app_key_123",
            secret: "mock_app_secret_456"
          }
        },
        {
          account: 'user',
          password: '123456',
          name: '普通用户',
          token: 'mock_user_token',
          userInfo: {
            name: '普通用户',
            lon: 118.8,
            lat: 36.86,
            accessToken: "mock_access_token_789",
            collapse: false 
          },
          othersInfo: [
            {name: "设备A", lon: 118.795, lat: 36.855},
            {name: "设备B", lon: 118.805, lat: 36.865}
          ],
          hardwareIds: [
            {id: "device_101", name: "测试硬件"}
          ],
          cameraKeys: {
            key: "mock_user_key_789",
            secret: "mock_user_secret_012"
          }
        }
      ]
    };
  },
  methods: {
    submitForm() {
      try {
        if (!this.param.account  || !this.param.password)  {
          this.$message.error(' 账号或密码不能为空');
          return;
        }
        
        // 查找匹配的用户 
        const user = this.mockUsers.find(u  => 
          u.account  === this.param.account  && 
          u.password  === this.param.password  
        );
        
        if (user) {
          // 存储token 
          localStorage.setItem("user_token",  user.token); 
          
          // 初始化用户数据到store 
          this.$store.commit('getUserInfo',  user.userInfo); 
          this.$store.commit('getOthersInfo',  user.othersInfo); 
          this.$store.commit('getUserId',  user.hardwareIds); 
          this.$store.commit('mapReady'); 
          
          // 模拟获取摄像头token和列表 
          this.$store.commit('getAccessToken',  `mock_camera_token_${user.token}`); 
          this.$store.commit('getCameraList',  [
            {deviceSerial: `cam_${user.token.slice(-3)}`,  channelNo: 1, name: `${user.name} 的摄像头`}
          ]);
          
          this.$router.push("/"); 
          this.$message.success(` 欢迎回来，${user.name}`); 
        } else {
          this.$message.error(' 账号或密码错误');
        }
      } catch (error) {
        console.error(' 登录出错:', error);
        this.$message.error(' 登录过程中出错，请稍后再试');
      }
    }
  }
};
</script>
 
<style scoped>
.login-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  background-image: url(../../assets/img/login-bg.jpg); 
  background-size: 100%;
}
.ms-title {
  width: 100%;
  line-height: 50px;
  text-align: center;
  font-size: 20px;
  color: #fff;
  border-bottom: 1px solid #ddd;
}
.ms-login {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 350px;
  margin: -190px 0 0 -175px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.3);
  overflow: hidden;
}
.ms-content {
  padding: 30px 30px;
}
.login-btn {
  text-align: center;
}
.login-btn button {
  width: 100%;
  height: 36px;
  margin-bottom: 10px;
}
.login-tips {
  font-size: 12px;
  line-height: 30px;
  color: #fff;
}
</style>